<!-- 协同页面 -->
<template>
	<view>
		<!-- 通知的信息 -->
		<view class="notification" @click="onDetail(detail)">
			<view class="notification-top">
				<view class="title">{{detail.bpmBizTitle}}</view>
			</view>
			<view class="notification-middle">
				<view class="label">{{detail.processDefinitionName || detail.prcocessDefinitionName}}</view>
				<view class="label-content">{{detail.taskName}}</view>
			</view>
			<view class="notification-bottom">
				<view class="avatar-name">
					<view class="avatar">
						<image src="@/static/synergy/avatar.png" mode=""></image>
					</view>
					<view class="name">由{{detail.processApplyUserName || detail.startUserName}}提交</view>
				</view>
				<view class="date-time">
					{{detail.taskBeginTime || detail.startTime}}
				</view>
			</view>
			<!-- v-if="record.taskAssigneeName&&record.taskAssigneeName!=''" -->
			<template v-if="(tabIndex != 3 && !detail.taskAssigneeName) || (tabIndex == 3 && !detail.prcocessDefinitionName)">
				<view class="line"><u-line></u-line></view>
				<view class="btn">
					<view class="btn-btn" @click.stop="onClaim(detail)">签收</view>
					<view style="color: rgba(0, 0, 0, .3)">|</view>
					<view class="btn-btn" @click.stop="onDetail(detail)">查看</view>
					<view style="color: rgba(0, 0, 0, .3)" v-if="detail.isIgnore=='1'">|</view>
					<view class="btn-btn" @click.stop="handleIgnore(detail)" v-if="detail.isIgnore=='1'">忽略</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	
	export default {
		props: {
			detail: {
				type: Object,
				default: () => {}
			},
			tabIndex: {
				type: [String,Number],
			}
		},
		data() {
			return {}
		},
		onLoad() {},
		methods: {
			// 点击签收
			onClaim (item) {
				this.$emit('click', item)
			},
			
			// 点击跳转详情
			onDetail (item) {
				if((this.tabIndex != 3 && !this.detail.taskAssigneeName) || (this.tabIndex == 3 && !this.detail.prcocessDefinitionName)){
					this.$emit('detail', item,'sign')
					return
				}
				this.$emit('detail', item)
			},
			handleIgnore (item) {
				this.$emit('handleIgnore', item)
			}
		}
	}
</script>
<style lang="scss" scoped>

// 通知信息
.notification{
	background: #FFFFFF;
	box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.05);
	border-radius: 8rpx;
	
	padding: 20rpx 22rpx 0rpx 32rpx;
	margin-bottom: 20rpx;
	.notification-top{
		display: flex;
		align-items: center;
		.title{
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #171717;
			// width: 552rpx;
			overflow: hidden; /*超出隐藏*/
			text-overflow: ellipsis;/*隐藏后添加省略号*/
			white-space: nowrap;/*强制不换行*/
		}
	}
	
	.notification-middle{
		display: flex;
		align-items: center;
		margin-top: 12rpx;
		.label{
			font-size: 10px;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #1E6FFF;
			padding: 6rpx 8rpx;
			border-radius: 6rpx;
			border: 1px solid #1E6FFF;
			margin-right: 12rpx;
		}
		.label-content{
			font-size: 12px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #919191;
		}
	}
	
	.notification-bottom{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 18rpx;
		padding-bottom: 20rpx;
		.avatar-name{
			display: flex;
			align-items: center;
			.avatar{
				margin-right: 8rpx;
				width: 32rpx;
				height: 32rpx;
				image{
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
				}
			}
			.name{
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #7F7F7F;
			}
		}
		.date-time{
			font-size: 12px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #C6C6C6;
		}
		
	}
	.btn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1E6FFF;
		
		.btn-btn{
			text-align: center;
			width: 48%;
		}
	}
}
</style>
